<template>
  <div>
    <div v-if="imgUpload == 0">
      <div class="app-list-template sowingMapTemplate">
        <div class="show3 show sowingShow">
            <div class="uploadPicture3 allList sowingAllList">
                <div class="el-upload-dragger" @click="cropperShow(2)">
                  <img v-if="imageUrl2" :src="upload_prefix + imageUrl2" class="avatarSowing">
                  <img v-else-if="imagesdata2" :src="upload_prefix + imagesdata2" class="avatarSowing">
                  <!-- <img v-else-if="imagesdata2[0]" :src="upload_prefix + imagesdata2[0].path" class="avatar"> -->
                  <i v-else class="el-icon-plus avatar-uploader-icon addImg"></i>
                </div>
            </div>
        </div>
        <image-cropper
          :width="width"
          :height="height"
          :params="params"
          :url="upload_img"
          @close='close'
          @crop-upload-success="cropSuccess"
          langType="zh"
          :key="imagecropperKey"
          v-show="imagecropperShow"></image-cropper>
      </div>
    </div>

    <div v-else-if="imgUpload == 1">
      <div class="app-list-template sowingMapTemplate">
        <div class="show3 show sowingShow">
            <div class="uploadPicture3 allList sowingAllList">
                <div class="el-upload-dragger" @click="cropperShow(2)">
                  <img v-if="imageUrl2" :src="upload_prefix + imageUrl2" class="avatarSowing aaa1">
                  <img v-else-if="imagesdata2" :src="upload_prefix + imagesdata2" class="avatarSowing bbb1">
                  <!-- <img v-else-if="imagesdata2[0]" :src="upload_prefix + imagesdata2[0].path" class="avatar"> -->
                  <i v-else class="el-icon-plus avatar-uploader-icon addImg"></i>
                </div>
            </div>
        </div>
        <image-cropper
          :width="width"
          :height="height"
          :params="params"
          :url="upload_img"
          @close='close'
          @crop-upload-success="cropSuccess"
          langType="zh"
          :key="imagecropperKey"
          v-show="imagecropperShow"></image-cropper>
      </div>
    </div>

    <div v-else-if="imgUpload == 2">
      <div class="app-list-template sowingMapTemplate">
        <div class="show3 show sowingShow">
            <div class="uploadPicture3 allList sowingAllList">
                <div class="el-upload-dragger" @click="cropperShow(2)">
                  <img v-if="imageUrl2" :src="upload_prefix + imageUrl2" class="avatarSowing">
                  <img v-else-if="imagesdata2" :src="upload_prefix + imagesdata2" class="avatarSowing">
                  <!-- <img v-else-if="imagesdata2[0]" :src="upload_prefix + imagesdata2[0].path" class="avatar"> -->
                  <i v-else class="el-icon-plus avatar-uploader-icon addImg"></i>
                </div>
            </div>
        </div>
        <image-cropper
          :width="width"
          :height="height"
          :params="params"
          :url="upload_img"
          @close='close'
          @crop-upload-success="cropSuccess"
          langType="zh"
          :key="imagecropperKey"
          v-show="imagecropperShow"></image-cropper>
      </div>
    </div>

    <div v-else-if="imgUpload == 3">
      <div class="app-list-template sowingMapTemplate">
        <div class="show3 show sowingShow">
            <div class="uploadPicture3 allList sowingAllList">
                <div class="el-upload-dragger" @click="cropperShow(2)">
                  <img v-if="imageUrl2" :src="upload_prefix + imageUrl2" class="avatarSowing">
                  <img v-else-if="imagesdata2" :src="upload_prefix + imagesdata2" class="avatarSowing">
                  <!-- <img v-else-if="imagesdata2[0]" :src="upload_prefix + imagesdata2[0].path" class="avatar"> -->
                  <i v-else class="el-icon-plus avatar-uploader-icon addImg"></i>
                </div>
            </div>
        </div>
        <image-cropper
          :width="width"
          :height="height"
          :params="params"
          :url="upload_img"
          @close='close'
          @crop-upload-success="cropSuccess"
          langType="zh"
          :key="imagecropperKey"
          v-show="imagecropperShow"></image-cropper>
      </div>
    </div>

    <div v-else-if="imgUpload == 4">
      <div class="app-list-template sowingMapTemplate">
        <div class="show3 show sowingShow">
            <div class="uploadPicture3 allList sowingAllList">
                <div class="el-upload-dragger" @click="cropperShow(2)">
                  <img v-if="imageUrl2" :src="upload_prefix + imageUrl2" class="avatarSowing">
                  <img v-else-if="imagesdata2" :src="upload_prefix + imagesdata2" class="avatarSowing">
                  <!-- <img v-else-if="imagesdata2[0]" :src="upload_prefix + imagesdata2[0].path" class="avatar"> -->
                  <i v-else class="el-icon-plus avatar-uploader-icon addImg"></i>
                </div>
            </div>
        </div>
        <image-cropper
          :width="width"
          :height="height"
          :params="params"
          :url="upload_img"
          @close='close'
          @crop-upload-success="cropSuccess"
          langType="zh"
          :key="imagecropperKey"
          v-show="imagecropperShow"></image-cropper>
      </div>
    </div>

  </div>
</template>
<script>
import ImageCropper from '@/components/ImageCropperMy'
export default {
  name: 'TemplateType',
  components: { ImageCropper },
  props: {
    imgUpload: {
      type: Number
    },
    imagesdata2: {
      type: String
    },
    templatetypedata: {
      type: String
    },
    description: {
      type: String
    },
    releaseTerminal: {
      type: String
    }
  },
  data() {
    return {
      dialogVisible: false,
      templateType: '1',
      image: '',
      imageUrl2: '',
      width: 1200,
      height: 600,
      params: { fileext: 'png' },
      upload_img: process.env.BASE_API + '/zcmtask' + '/zcm/upload/pic',
      upload_prefix: process.env.BASE_API + '/videaapi',
      imagecropperShow: false,
      imagecropperKey: 0,
      dataImg: ''
    }
  },
  filters: {
    intercept: function(value) {
      // js文字截取
      if (value.length > 40) {
        const newCon = value.substring(0, 40) + '...'
        return newCon
      } else {
        return value
      }
    }
  },
  // watch:{
  //   imagesdata2(curVal, oldVal){
  //     this.dataImg = curVal
  //     console.log(curVal)
  //     console.log(oldVal)
  //   }
  // },

  created() {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetchData()
  },
  methods: {
    fetchData() {},
    cropperShow(key) {
      this.imagecropperShow = true
      this.imagecropperKey = key
    },
    cropSuccess(resData) {
      console.log(resData)
      this.imagecropperShow = false

      this.imageUrl2 = resData.data

      this.$emit('images-upload-success', this.imageUrl2)
      this.$message({
        message: '上传成功',
        type: 'success',
        onClose: () => {
          console.log(this.imageUrl2)
          this.imagesinit()
          console.log(this.imageUrl2)
        }
      })
    },
    close() {
      this.imagecropperShow = false
    },
    imagesinit() {
      this.image = ''
      this.imageUrl1 = ''
      this.imageUrl2 = ''
      this.imageUrl3 = ''
      this.imageUrl4 = ''
      this.imageUrl5 = ''
      this.imagecropperKey = 0
    }
  }
}
</script>

<style scoped>
.conSizeUpload p {
  font-size: 14px;
  color: #333333;
  line-height: 22px;
}
.firstConP {
  margin-top: 42px;
}
.secondConP {
  margin-top: 22px;
}
.container {
  background-color: #efefef;
  min-height: 100%;
}
.app-list-template {
  border: 1px solid #d9d9d9;
  width: 333px;
  height: 180px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.sowingMapTemplate {
  width: 302px;
  height: 150px;
  border: 0 !important;
}
.app-list-template .show {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px 28px;
  overflow: hidden;
}
.sowingShow {
  padding: 0 !important;
}
.app-list-template .edit {
  position: absolute;
  top: 0px;
  right: 10px;
  color: #8492a6;
  cursor: pointer;
  font-size: 1.1em;
}
.app-list-template:hover .edit {
  opacity: 1;
}
.app-list-template .edit {
  opacity: 0;
  transition: all 0.3s;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 100%;
  line-height: 100%;
  text-align: center;
}
.avatar {
  width: 100%;
  display: block;
}

.uploadPicture2 {
  width: 102px;
  height: 66px;
  display: inline-block;
  margin-left: 12px;
  margin-top: 50px;
}
.uploadPicture3 {
  width: 146px;
  height: 80px;
  margin: 0 auto;
  margin-top: 8px;
}
.sowingAllList {
  width: 302px;
  height: 150px;
  margin-top: 0;
}
.uploadPicture4 {
  width: 82px;
  height: 53px;
  display: inline-block;
  margin-top: 24px;
  margin-left: 5px;
}
.uploadPicture4:first-child {
  margin-left: 0;
}

.allList .avatar-uploader {
  width: 100%;
  height: 100%;
}
.allList .avatar-uploader .el-upload {
  width: 100%;
  height: 100%;
}
.allList .el-upload-dragger {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.addImg {
  position: relative;
}
.addImg::before {
  position: absolute;
  top: 50%;
  margin-top: -14px;
  left: 50%;
  margin-left: -14px;
}
.avatarSowing {
  width: 100%;
  height: 150px;
}
</style>
